<!DOCTYPE html>
<html lang="zh-Hans">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Canvas在线画板</title>
	<link rel="stylesheet" href="./style.css">
	<script src="//at.alicdn.com/t/font_1261131_62oi7i3i5yg.js"></script>
</head>

<body>
<canvas id="canvas" width="800px" height="800px"></canvas>
<div id="actions" class="actions">
	<svg class="icon active" id="pen">
		<use xlink:href="#icon-pen"></use>
	</svg>
	<svg class="icon" id="eraser">
		<use xlink:href="#icon-eraser"></use>
	</svg>
	<svg class="icon" id="clear">
		<use xlink:href="#icon-delete"></use>
	</svg>
	<svg class="icon" id="download">
		<use xlink:href="#icon-download"></use>
	</svg>
</div>
<div class="color-wrapper">
	<ul>
		<li class="black active" id="black"></li>
		<li class="red" id="red"></li>
		<li class="yellow" id="yellow"></li>
		<li class="blue" id="blue"></li>
	</ul>
</div>
<div class="whole-wrapper">
	<div class="width-wrapper">
		<div class="thin-wrapper" id="thin_wrapper">
			<div class="thin active" id="thin"></div>
		</div>
		<div class="thick-wrapper" id="thick_wrapper">
			<div class="thick" id="thick"></div>
		</div>
	</div>
</div>

<script src="./main.js"></script>
</body>

</html>